<template>
  <div class="page-asd">
    <div>
      4
      <div v-for="item in 3" :key="item">
        奥术大师多反而AV方式变奥术大师多反而AV方式变奥术大师多反而AV方式变奥术大师多反而AV方式变奥术大师多反而AV方式变
      </div>
      5
    </div>
    6 <el-button @click="click1($event)">按钮1</el-button> 7
    <el-button type="primary" @click="click2($event)">按钮2</el-button> 8
    <div type="primary" @click="click2($event)">按钮3-div</div>
    9
  </div>
  10
</template>
11 12
<script>
13import LdxLoading from "./LdxLoading.js";
14
15LdxLoading.init({
16  text: "加载中...",
17  customClass: "ldx-loading",
18  color: 'green',
19  // fullscreen:false
20})
21export default {
22  components: {
23    Comp,Compcopy
24  },
25  props: {},
26  data() {
27    return {
28      query: {
29        name: "zs"
30      },
31    };
32  },
33  mounted() {
34    // this.initPage();
35  },
36  methods: {
37    async initPage() {
38      const el = document.querySelector('.page-asd')
39      LdxLoading.open(el, {text: "页面加载中"});
40      const res = await this.getData(this.query);
41      LdxLoading.close(el);
42    },
43    getData(query) {
44      return new Promise((resolve, reject) => {
45        setTimeout(() => {
46          resolve({...query, age: 18});
47        }, 1000);
48      });
49    },
50    click1(event) {
51      console.log("点击了")
52      this.initPage();
53    },
54    click2(event) {
55      console.log("event", Array.from(event.target.classList).includes('ldx-loading-mask'));
56      const el = event.currentTarget; // 或 event.target
57      LdxLoading.open(el, {text: ""});
58      setTimeout(() => {
59        LdxLoading.close(el);
60      }, 3000);
61    }
62  }
63};
64
</script>
65
<style lang="scss" scoped>
66.page-asd {
67  width: 100%;
68  height: 100%;
69  background: pink;
70  overflow-y: auto;
71}
72
</style>
